﻿@{
    Layout = "_Layout";
    ViewData["Title"] = "站点列表";
}

<div class="bg-white p-4">
    <button class="layui-btn layui-btn-sm">Nginx</button>
    <button class="layui-btn layui-btn-primary layui-border-green layui-btn-radius layui-btn-sm">已启动</button>
    <span class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm">v1.4.2.6</span>
    <button class="layui-btn layui-btn-danger layui-btn-sm">停止</button>
    <button class="layui-btn layui-btn-danger layui-btn-sm">重启</button>
    <button class="layui-btn layui-btn-danger layui-btn-sm">重载</button>
    <button class="layui-btn layui-bg-blue layui-btn-sm">设置</button>
</div>

<div class="bg-white p-4 flex flex-row justify-between mt-4">
    <div>
        <a href="/website/add" class="layui-btn">添加网站</a>
    </div>
    <div class="layui-form">
        <div class="layui-input-wrap">
            <input type="text" lay-affix="search" lay-filter="search" lay-options="{split: true}" placeholder="搜索…" class="layui-input">
        </div>
    </div>
</div>
<div class="bg-white mt-4 p-4">
    <table class="layui-table" id="table-list"></table>
</div>

@section Scripts
{
    <script>
        layui.use('table', function(){
            var table = layui.table;
            var form = layui.form;

            // 已知数据渲染
            var inst = table.render({
                elem: '#table-list',
                cols: [[ //标题栏
                    {field: 'title', title: '站点名'},
                    {field: 'type', title: '类型', width: 120, templet: function (d){ return '<span class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm">PHP</span>'}},
                    {field: 'status', title: '状态', minWidth: 160, templet: function (d){ return '<span>正常</span>'}},
                    {field: 'backup', title: '备份', width: 160},
                    {field: 'root', title: '目录'},
                    {field: 'ssl', title: 'SSL证书'},
                    {title: '操作'},
                ]],
                data: [{ // 赋值已知数据
                    "title": "qq.com",
                    "type": 1,
                    "status": "运行中",
                    "backup": "已备份(1)",
                    "root": "/www/wwwroot/default",
                    "ssl": "https"
                },{ // 赋值已知数据
                    "title": "baidu.com",
                    "type": 1,
                    "status": "运行中",
                    "backup": "已备份(1)",
                    "root": "/www/wwwroot/default",
                    "ssl": "https"
                },{ // 赋值已知数据
                    "title": "bytedance.com",
                    "type": 1,
                    "status": "运行中",
                    "backup": "已备份(1)",
                    "root": "/www/wwwroot/default",
                    "ssl": "https"
                },{ // 赋值已知数据
                    "title": "nice.com",
                    "type": 1,
                    "status": "运行中",
                    "backup": "已备份(1)",
                    "root": "/www/wwwroot/default",
                    "ssl": "https"
                },{ // 赋值已知数据
                    "title": "douyin.com",
                    "type": 1,
                    "status": "运行中",
                    "backup": "已备份(1)",
                    "root": "/www/wwwroot/default",
                    "ssl": "https"
                },{ // 赋值已知数据
                    "title": "google.com",
                    "type": 1,
                    "status": "运行中",
                    "backup": "已备份(1)",
                    "root": "/www/wwwroot/default",
                    "ssl": "https"
                }],
                //skin: 'line', // 表格风格
                //even: true,
                page: true, // 是否显示分页
                limits: [5, 10, 15],
                limit: 5 // 每页默认显示的数量
            });

            // 输入框点缀事件 - 搜索示例
            form.on('input-affix(search)', function(data){
                var elem = data.elem; // 输入框
                var value = elem.value; // 输入框的值
                if(!value){
                    layer.msg('请输入搜索内容');
                    return elem.focus()
                }
                // 模拟搜索跳转
                location.href = '?keywords='+ value + '&_'+ new Date().getTime() +'#affix-custom';
            });
        });
    </script>
}
